<!-- 引入模板文件 -->
<!-- 注意：引用的是绝对路径 -->
<extend name="./Public/templete/base.html"/>  

<!-- 页面标题 -->
<block name="title"><title>Index/login</title></block>

<!-- 添加该页面对应需要的css文件 -->
<block name="link">
  <link rel="shortcut icon" src="./favicon.ico" />
  <link rel="stylesheet" type="text/css" href="../../../Public/source/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="../../../Public/source/attendance/main.css">
</block>


<!-- 右下侧的主体内容 主要内容在此处写 -->
<block name="content">
    <div class="layui-body">
        <div style="margin: 15px;">
           <!-- 代码从此次开始写，外层两个div不建议删除 -->
          <blockquote class="layui-elem-quote at-quote-ys" id="yesLabel" style="display: none;">您是今天的考勤负责人，请对其他成员负责，认真做好考勤工作。</blockquote> 
          <blockquote class="layui-elem-quote at-quote-no" id="noLabel" style="display: none;">您不是今天的考勤负责人，但是您可以在此处看到今天的签到情况。</blockquote>
          <blockquote class="layui-elem-quote at-quote-ys" id="superLabel" style="display: none;">您是超级管理员，可以对当日考勤状况进行修改。</blockquote>
          <blockquote class="layui-elem-quote layui-quote-nm">今日考勤状况： <span class="layui-badge layui-bg-green" id="att"></span> 人已到， <span class="layui-badge layui-bg" id="unatt"></span> 人未到。</blockquote>
          <table class="layui-hide" id="table" lay-filter = "operate"></table>
          <div style="text-align: right;">
            <!-- <button id="supermeButton" class="layui-btn layui-btn-danger" type="button" style="display: none;">强制轮换</button> -->
            <button id="submitButton" class="layui-btn layui-btn-normal" type="button" style="display: none;">值班轮换</button>
          </div>
        </div>
    </div>
</block>  

<!-- 引入或写js代码 -->
<block name="js">
  <script src="../../../Public/source/layui/layui.js"></script>
  <script type="text/javascript" src="../../../Public/source/jquery-3.2.1.js"></script>
  <script type="text/javascript">
    var yesLabel = document.getElementById('yesLabel');
    var noLabel = document.getElementById('noLabel');
    var submitButton = document.getElementById('submitButton');
    var superLabel = document.getElementById('superLabel');
    // var supermeButton = document.getElementById('supermeButton');
    //用天数进行限制，刷新后按钮仍消失，转天后出现
    //如没有考勤员，选择考勤员
      $.ajax({
        url:'__URL__/choose'
      });
      $.ajax({
        async : false,
        url:'__URL__/tianjia'
      });
      getNumber();
      getNumber1();
      $.ajax({
        url:'__URL__/auth'
        ,success:function(data)
        {
          if(data!=0)
          {
            submitButton.style.display = 'inline';
          }
        }
      });
    //权限对按钮的制约
    $.ajax({
      url:'__URL__/sess',
      success:function(data){
        if(data==0){
          noLabel.style.display = 'block';
        }else{
          //设置两个考勤员的值只有都相同才可轮转
          $.ajax({
            url:'__URL__/auth'
            ,success:function(data)
            {
              if(data==1)
              {
                yesLabel.style.display = 'block';
                submitButton.style.display = 'inline';
              }
              else if(data==2)
              {
                superLabel.style.display='block';
                submitButton.style.display = 'inline';
              }
              else
              {
                noLabel.style.display = 'block';
              }
            }
          });
        }
      }
    })

    //提交数据表单
    
    $('#submitButton').click(function(){
      $.ajax({
        url:"__URL__/check"
        ,success:function(data)
        {
          if(data==null)
          {
      var r=confirm("一旦提交将无法修改，并轮转到下一位考勤员，你确定提交吗？");
      if(r==true)
      {
      $.ajax({
        url:'__URL__/tijiao',
        success(data)
        {
          layer.msg("轮换成功");
          getNumber();
          yesLabel.style.display = 'none';
          //noLabel.style.display = 'block';
          submitButton.style.display = 'none';
        }
      });
    }

  } 
  else
  {
    layer.msg("尚未完成全部考勤");
  }}
 }) 
  
 
    });
    //刷新表单
    function getNumber1()
    {
      $.ajax({
      url:'__URL__/stat'
      ,success(data)
      {
        $('#att').text(data[0]);
        $('#unatt').text(data[1]);
      }
      });
    }
    function getNumber()
    {
      var table;
      layui.use('table', function(){
        table = layui.table;
        table.render({
          elem: '#table'
          ,id: 'table'
          ,url:'__URL__/getmsg'
          ,height: 'full-346'
          ,size: 'lg'
          ,unresize: true
          ,limit:6
          ,page: true
          ,cols: [[
            {type: 'checkbox'}
            ,{field: 'num', title: '编号', width: 128, sort: true}
            ,{field: 'name', title: '姓名', width: 180}
            ,{field: 'group', title: '方向', width: 96, sort: true}
            ,{field: 'status', title: '职位', width: 120, sort: true}
            ,{field: ''}
            ,{field: 'stat', title: '签到状况', width: 126, templet: '#statusTpl'}
            ,{toolbar: '#operate', title: '操作', width: 126}
          ]]
        });
        //监听工具条
        table.on('tool(operate)', function(obj){
          var data = obj.data;
          if(obj.event === 'operate'){
            $.ajax({
              url:'__URL__/auth',
              async : false,
              success:function(msg){
            if(msg!=0){
              var checkStatus = table.checkStatus('table'); //test即为基础参数id对应的值
              console.log(checkStatus.data)
              layer.open({
                content: '请确认该成员是否到勤后在进行此操作，防止造成不必要的麻烦。'
                ,btn: ['确认到勤', '取消到勤','迟到']
                ,btn1: function(index, layero){
                  $.ajax({
                    url:"__URL__/btn1",
                    async : false,
                    data:{num:data.num},
                    success(data)
                    {
                      if(data==1)
                      {
                        layer.msg('操作成功，当前成员今日的到勤情况变为：已到勤');//刷新页面看不到
                        $(".layui-laypage-btn")[0].click(); 
                        getNumber1();
                      }
                      else
                      {
                        layer.msg('请勿重复操作');
                      }
                    }
                  });
                }
                ,btn2: function(index, layero){
                  $.ajax({
                    url:"__URL__/btn2",
                    data:{num:data.num},
                    success(data)
                    {
                      if(data==1)
                      {
                        layer.msg('操作成功，当前成员今日的到勤情况变为：未到勤');
                        $(".layui-laypage-btn")[0].click(); 
                        getNumber1();
                      }
                      else
                      {
                        layer.msg('请勿重复操作');
                      }
                    }
                  });
                }
                ,btn3: function(index, layero){
                  $.ajax({
                    url:"__URL__/btn3",
                    data:{num:data.num},
                    success(data)
                    {
                      if(data==1)
                      {
                        layer.msg('操作成功，当前成员今日的到勤情况变为：迟到');
                        $(".layui-laypage-btn")[0].click(); 
                        getNumber1();
                      }
                      else
                      {
                        layer.msg('请勿重复操作');
                      }
                    }
                  });
                },
                /*end:function()
                {
                  location.reload()
                }*/
              });
            }else{
              layer.msg('您的权限不足，无法进行该操作。');
            }},
            }); 
          }
        })
      })  
    }
    //显示表单
    layui.use('element', function(){
      var element = layui.element;
    });
    getNumber();
    getNumber1();
  </script>
  <script type="text/html" id="statusTpl">
    {{#  if(d.stat == 1){ }}
      <span style="color: green;">已到勤</span>
    {{#  } else if(d.stat == -2) { }}
      <span style="color: darkred;">未到勤</span>
    {{#  } else if(d.stat == -1) { }}
      <span style="color: orange;">迟到</span>
    {{#  } else { }}
      <span style="color: grey;">尚未考勤</span>
    {{#  } }} 
  </script>
  <script type="text/html" id="operate">
    <button class="layui-btn layui-btn-normal layui-btn-fluid layui-btn-sm" lay-event="operate">操作</button>
  </script>
</block>